<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TexturedText</title>
</head>

<body>
    <svg viewBox="0 0 610 405">
        <defs>
            <filter id="conform">
                <!-- 原始图片 -->
                <feImage href="../assets/img/cloth.jpeg" x="0" y="0" width="100%" height="100%"
                    preserveAspectRatio="none" result="ORIGIN_IMAGE"></feImage>
                <!-- 原始图片=>灰度图片 -->
                <feColorMatrix in="ORIGIN_IMAGE" type="saturate" values="0" result="GRAY_IMAGE"></feColorMatrix>
                <!-- 灰度图片=>偏移文字 -->
                <feDisplacementMap in="SourceGraphic" in2="GRAY_IMAGE" scale="15" xChannelSelector="R"
                    yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap>
                <!-- 背景图片 -->
                <feImage href="../assets/img/cloth.jpeg" x="0" y="0" width="100%" height="100%"
                    preserveAspectRatio="none" result="BACKGROUND"></feImage>
                <!-- 偏移文字=>半透明文字 -->
                <feColorMatrix in="TEXTURED_TEXT" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.9 0"
                    result="OPACITY_TEXT"></feColorMatrix>
                <!-- 背景图片+半透明文字=>最终效果 -->
                <feBlend in="BACKGROUND" in2="OPACITY_TEXT" mode="multiply" result="BLENDED_TEXT"></feBlend>
            </filter>
        </defs>
        <Image href="../assets/img/cloth.jpeg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none">
        </Image>
        <text x="50%" y="50%" font-size="8rem" font-weigh="bold" text-anchor="middle" alignment-baseline="middle"
            fill="#000" filter="url(#conform)">LOGO</text>
    </svg>

</body>

</html>